<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全局属性</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(233, 195, 195);
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <!-- 设置id便于css和js对元素的操作，id具有唯一性，一个id只能在一个网页出现一次。侧重点在js的操作 -->
    <div class="div1"></div>
    <div class="div1 div2 div3"></div>
    <!-- 设置class便于css和js对元素的操作，
        1.多个元素可以公用一个class,侧重点在css的操作
        2.一个元素可以有多个class，class之间用空格分开
     -->
    <header data-msg="hello" data-name="header" data-age=20></header>
    <!-- 设置自定义属性，用data-自定义属性名，一个元素可以有多个自定义属性。
        自定义属性可以给元素添加一些数据，便于js的操作或者识别
    -->
    <div class="box" title="我是一个div" draggable="false">
        大漠孤烟直
    </div>
    <article lang="en">english article</article>
    <article lang="zh_cn">一片中文</article>
    <!-- lang属性一般写在html标签里面 -->
    <article contenteditable='false'>
        长河落日圆
    </article>
    <section spellcheck="true">hello how ar you </section>
    <section spellcheck>abaaaa</section>
    <input type="text" spellcheck> <br>
    <input type="、">
</body>
</html>